<template>
  <div class="charts">
    <div class="target-charts">
      <div class="top-tab">
        <el-tabs @tab-click="handleClick">
          <el-tab-pane label="一月"></el-tab-pane>
          <el-tab-pane label="二月"></el-tab-pane>
          <el-tab-pane label="三月"></el-tab-pane>
          <el-tab-pane label="四月"></el-tab-pane>
          <el-tab-pane label="五月"></el-tab-pane>
          <el-tab-pane label="六月"></el-tab-pane>
          <el-tab-pane label="七月"></el-tab-pane>
          <el-tab-pane label="八月"></el-tab-pane>
          <el-tab-pane label="九月"></el-tab-pane>
          <el-tab-pane label="十月"></el-tab-pane>
          <el-tab-pane label="十一月"></el-tab-pane>
          <el-tab-pane label="十二月"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="target">
        <div class="target-title">1.生产时间（分钟）</div>
        <el-form style="margin-top: 14px" ref="form" :model="data" inline>
          <el-row>
            <el-col :span="4">
              <el-form-item label="冲压车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车身车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="涂装车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总装车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总工厂：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="target-title">2.设备可动率（%）</div>
        <el-form style="margin-top: 14px" ref="form" :model="data" inline>
          <el-row>
            <el-col :span="4">
              <el-form-item label="冲压车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车身车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="涂装车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总装车间：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总工厂(年度)：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="target-title">3.MTTR（分钟）</div>
        <el-form style="margin-top: 14px" ref="form" :model="data" inline>
          <el-row>
            <el-col :span="4">
              <el-form-item label="冲压保全班（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车身保全班（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="涂装保全班（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总装保全班（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="动力维修班（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总工厂（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="target-title">4.MTBF（分钟）</div>
        <el-form style="margin-top: 14px" ref="form" :model="data" inline>
          <el-row>
            <el-col :span="4">
              <el-form-item label="冲压车间（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车身车间（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="涂装车间（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总装车间（年度）：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总工厂(年度)：">
                <el-input v-model="name" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="车间：">
                <Selects v-model="workshop_id" action="factoryList" :query="{ category: 2 }" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="班组：">
                <Selects v-model="workshop_id" action="factoryList" :query="{ category: 2 }" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="填写指标(1月-12月指标，用英文‘,’隔开)：">
                <el-input style="width: 700px" v-model="name" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Selects from '@/components/select-search'
export default {
  components: {
    Selects
  },
  data() {
    return{
      name: '',
      workshop_id: ''
    }
  },
  methods: {
    handleClick(tab) {
      console.log(tab);
    }
  }
}
</script>

<style scoped>
.target-charts {
  width: 100%;
}
.top-tab{
  padding: 20px 40px 0;
}
.target{
  padding: 20px 40px 0;
}
.target-title{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
<style>
.target .el-form-item__label{
  font-weight: normal;
  color: #000;
}
</style>
